<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>旋转变形</title>

        <style>
            .menu {
                color: black;
                position:relative;
            }

            .menu::after {
                content: "";
                width: 0;
                height: 0;

                position:absolute;
                top: 10px;

                border-width: 5px;
                border-style: solid;
                border-color: black transparent  transparent;
            }

            .menu:hover {
                color: red;
            }

            .menu:hover::after {
                border-top-color: red;
                top: 5px;
                transform: rotate(180deg);
            }
        </style>
    </head>
    <body>
        <span class="menu">这是一段文字</span>
    </body>
</html>